<template>
  <view class="notice-container">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <text class="iconfont icon-left"></text>
      </view>
      <view class="nav-title">{{ pageTitle }}</view>
      <view class="nav-right"></view>
    </view>

    <!-- 消息列表 -->
    <view class="notice-list" v-if="noticeList.length > 0">
      <view v-for="(item, index) in noticeList" :key="index" 
            class="notice-item" 
            @click="handleNoticeClick(item)">
        <view class="item-header">
          <view class="item-title">{{ item.noticeTitle }}</view>
          <view class="item-time">{{ formatTime(item.createTime) }}</view>
        </view>
        <view class="item-content">
          <text class="content-text">{{ item.noticeContent }}</text>
        </view>
        <view class="item-footer">
          <text class="item-author">发布人：{{ item.createBy }}</text>
          <!-- <view class="item-status" :class="item.status === '0' ? 'status-normal' : 'status-closed'">
            {{ item.status === '0' ? '正常' : '已关闭' }}
          </view> -->
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-else class="empty-state">
      <view class="empty-icon">
        <text class="iconfont icon-notification"></text>
      </view>
      <view class="empty-text">暂无{{ pageTitle }}</view>
      <view class="empty-desc">请稍后再来查看</view>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-state">
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script>
import { listNoticeByType } from "@/api/system/notice"

export default {
  data() {
    return {
      noticeList: [],
      loading: false,
      noticeType: '',
      pageTitle: ''
    }
  },
  onLoad(options) {
    // 获取传递的参数
    this.noticeType = options.type || '1'
    this.pageTitle = this.noticeType === '1' ? '系统提醒' : '支部通知'
    
    // 设置导航栏标题
    uni.setNavigationBarTitle({
      title: this.pageTitle
    })
    
    // 加载数据
    this.loadNoticeList()
  },
  methods: {
    // 加载消息列表
    loadNoticeList() {
      this.loading = true
      listNoticeByType(this.noticeType).then(response => {
        this.noticeList = response.data || []
        this.loading = false
      }).catch(() => {
        this.loading = false
        this.$modal.showToast('加载失败，请重试')
      })
    },
    
    // 点击消息项
    handleNoticeClick(item) {
      // 可以跳转到详情页面或显示详情弹窗
      this.$modal.showToast('消息详情功能待开发')
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return ''
      const date = new Date(timeStr)
      const now = new Date()
      const diff = now - date
      
      // 小于1分钟
      if (diff < 60000) {
        return '刚刚'
      }
      // 小于1小时
      if (diff < 3600000) {
        return Math.floor(diff / 60000) + '分钟前'
      }
      // 小于1天
      if (diff < 86400000) {
        return Math.floor(diff / 3600000) + '小时前'
      }
      // 小于7天
      if (diff < 604800000) {
        return Math.floor(diff / 86400000) + '天前'
      }
      
      // 超过7天显示具体日期
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f6f7;
}

.notice-container {
  min-height: 100vh;
  background-color: #f5f6f7;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 15px;
  background-color: #3c96f3;
  color: white;
  
  .nav-left {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .iconfont {
      font-size: 20px;
    }
  }
  
  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
  }
  
  .nav-right {
    width: 40px;
  }
}

.notice-list {
  padding: 15px;
  
  .notice-item {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    &:active {
      transform: scale(0.98);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }
    
    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 12px;
      
      .item-title {
        flex: 1;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        line-height: 1.4;
        margin-right: 10px;
      }
      
      .item-time {
        font-size: 12px;
        color: #999;
        white-space: nowrap;
      }
    }
    
    .item-content {
      margin-bottom: 15px;
      
      .content-text {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    
    .item-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .item-author {
        font-size: 12px;
        color: #999;
      }
      
      .item-status {
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 10px;
        
        &.status-normal {
          background-color: #e8f5e8;
          color: #52c41a;
        }
        
        &.status-closed {
          background-color: #fff2e8;
          color: #fa8c16;
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 20px;
  
  .empty-icon {
    font-size: 64px;
    color: #e0e0e0;
    margin-bottom: 20px;
  }
  
  .empty-text {
    font-size: 16px;
    color: #999;
    margin-bottom: 8px;
  }
  
  .empty-desc {
    font-size: 14px;
    color: #ccc;
  }
}

.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
  
  .loading-text {
    font-size: 14px;
    color: #999;
  }
}
</style>
